<template>
  <div class="personalinfo">
     <van-nav-bar
       title="个人信息"
       left-arrow
       @click-left="onClickLeft"
     />
     <div class="touxiang items">
       <span>头像</span>
       <div ><img :src="information.user_avatar" alt=""></div>
     </div>
     <div class="items" @click="goToIdentity">
       <span>身份</span> 
       <span><i>{{information.user_identity}}</i>&gt;</span>
     </div>
     <div class="items" @click="goToUsername">
       <span>称呼</span> 
       <span><i>{{information.user_nickname}}</i>&gt;</span>
     </div>
     <div class="items">
       <span>联系方式</span> 
       <span><i>{{information.user_phone}}</i>&gt;</span>
     </div>
     <div class="items">
       <span>主营业务</span> 
       <span><i>{{information.main_management}}</i>&gt;</span>
     </div>
     <div class="items">
       <span>绑定微信</span> 
       <span><i>{{information.user_wechat}}</i>&gt;</span>
     </div>
     <div class="items" @click="showPopup">
       <span>退出账户</span> 
       <span>&gt;</span>
     </div>
     <div class="byebye">
     <van-popup v-model:show="show">
       <p>您确定要退出账户吗？</p>
       <span @click="yes">确定</span>
       <span @click="no">取消</span>
     </van-popup></div>

  </div>
</template>

<script>
import {useRouter} from "vue-router";
import { computed, onMounted,ref } from "vue";
import { useStore } from "vuex";

export default {
  setup(){
    onMounted(async()=>{
      await store.dispatch("getUserInfo");
    })
    const router=useRouter();
    const onClickLeft = () =>{
      router.push('/home/mine');
    };

    //从仓库获取到个人信息后渲染
    const store=useStore();
    const information=computed(() => store.state.userInfo);

    //修改用户信息
    const goToIdentity=()=>{  //身份选择
     if(localStorage.getItem('userToken')){
       router.push('/identity');
     }else{
       router.push('/login');
     }
    }
    const goToUsername=()=>{  //修改昵称
     if(localStorage.getItem('userToken')){
       router.push('/username'); 
     }else{
       router.push('/login');
     }
    }

    //退出账户
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const yes=()=>{
      localStorage.removeItem('userToken');
      localStorage.removeItem("Enterprise_Certification");
      router.push('/login');     
    };
    const no=()=>{
      show.value = false;
    }
    return { onClickLeft,information,goToIdentity,goToUsername,yes,no,showPopup,show }
  }
};
</script>
<style lang="scss" scoped>
.personalinfo{
  background:#f5f5f5;
}
.items{
  display:flex;
  justify-content: space-between;
  font-size:16px;
  padding:20px;
  line-height:30px;
  margin-bottom: 2px;
  background:#fff;
  span:nth-child(2){
    font-size:18px;
    i{
      font-size: 14px;
      color:rgb(138, 137, 137);
      display:inline-block;
      margin-right: 15px;
    }
  }
}
.items:nth-of-type(4),.items:nth-of-type(6){
  margin-bottom:10px;
}
.touxiang{ 
  height:80px;
  width:100%;
  line-height:80px;
  background: #fff;
  margin-bottom:10px;
  div{
    height:50px;
    width:50px;
    border-radius:50%;
    overflow: hidden;
    img{
      height:100%;
      width:100%;
    }
  }
  span{
      line-height:50px;
  }
}
.byebye{
  p{
    width:300px;
    line-height:40px;
    font-size: 20px;
    text-align:center;
    margin-top:30px;
  }
  span{
    display:inline-block;
    height:30px;
    width:80px;
    line-height:30px;
    text-align:center;
    background: rgb(226, 215, 215);
    margin:30px 35px;
    border-radius:15px;
    font-size:16px;
  }
}
</style>
